<template>
  <div>
    <!-- 创建查询条件 -->
    <TopFilter ref="formPanel" :list="topFilterList" :cols="4" @filterChange="changeHandle"></TopFilter>
    <!-- 创建一个查询table -->
    <FilterTable ref="table"
    :fetchapi="fetchApi"
    :params="fetchParams"
    :datakey="'rows'"
    :columns="columns"
    :onColumnsChange="table => (this.table = table)">
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-download" :loading="exportLoading" @click="exportData()">导出</el-button>
      </template>
    </FilterTable>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getRepairUnsatisifiedReason, exportRepairUnsatisfiedReason } from '@/api/customerRepair/visitAnalysis/repairUnsatisifiedReason';
import { getAllUser } from '@/api/customerRepair/usedCarVisit/resultEntry';
import { exportExcelFile } from '@/utils/index';

export default {
  mixins: [dictionary],
  // 组件注册
  // components: {
  //   RtmAlarmDetail,
  //   EditAlarmDetail
  // },
  // 绑定数据定义
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: getRepairUnsatisifiedReason,
      fetchParams: { xhrAbort: true },
      columns: this.createColumns(),
      type: null,
      exportLoading: false
    };
  },
  created() {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    // this.getAllUser();
    this.getUnsatisifiedReason();
  },
  // 处理方法
  methods: {
    // 关闭页面触发事件
    // 创建查询条件
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '日期范围',
          style: { minWidth: '200px' },
          fieldName: 'inputDateS|inputDateE',
          valueFormat: 'yyyy-MM-dd'
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return props.row.RESULT_REASON != '82011000' ? <span>Top{props.row.index + 1}</span> : '所有弱项';
          }
        },
        {
          title: '售后回访Top10弱项名称',
          dataIndex: 'BMYYYFL',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{this.createDictText(props.row.BMYYYFL, '8201')}</span>;
          }
        },
        {
          title: '数量',
          dataIndex: 'COUNTS',
          sorter: true
          // filter: true,
          // filterType: 'input',
          // summation: true
        },
        {
          title: '占所有弱项数量的比例',
          dataIndex: 'RATE',
          sorter: true
          // filter: true,
          // filterType: 'input',
          // summation: true,
          // summationUnit: '%'
        }
      ];
    },
    // 查询条件触发方法
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
    },
    // 所有用户
    // async getAllUser() {
    //   const res = await getAllUser();
    //   this.columns.find(item => item.dataIndex === 'TRANCER').editItems = res.data.map(x => ({ value: x.userId + '', text: x.employeeName }));
    // },
    async getUnsatisifiedReason() {
      let data = [
        { id: 82011000, name: '所有弱项' },
        { id: 82011001, name: '服务人员的用户对待' },
        { id: 82011002, name: '替代交通服务' },
        { id: 82011003, name: '服务费用' },
        { id: 82011004, name: '服务时间' },
        { id: 82011005, name: '维修/保养质量' },
        { id: 82011006, name: '硬件设施' },
        { id: 82011007, name: '其他' }
      ];
      this.columns.find(item => item.dataIndex === 'RESULT_REASON').editItems = data.map(x => ({ value: x.id + '', text: x.name }));
    },
    // 导出
    exportData() {
      this.exportLoading = true;
      exportRepairUnsatisfiedReason(this.fetchParams).then(res => {
        exportExcelFile(res, '维修不满意因子统计报表');
      });
      this.exportLoading = false;
    }
  }
};
</script>
